<template>
  <div class="container max-w-screen-lg mx-auto" v-if="post">
    <div class="text-center">
      <h2>{{ post.title }}</h2>
    </div>
    <div class="flex items-center justify-center space-x-5 mt-3">
      <TextIcon tip="作者" icon="mdi:user" :text="post.username" :size="16"></TextIcon>
      <ArrayTag tip="文章标签" :tags="post.tags" :size="16"></ArrayTag>
      <DateIcon tip="创作时间" icon="eos-icons:modified-date-outlined" :date="post.createdAt" :size="16"></DateIcon>
    </div>
    <n-divider></n-divider>
    <div class="absolute left-0 top-20 z-50">
      <div class="hidden md:block">
        <CatalogShowButton v-model:is-expand="catalogShow"></CatalogShowButton>
      </div>
      <div class="md:hidden">
        <CatalogDrawer v-model:is-show="catalogDrawerShow">
          <PreviewCatalog :id="post.id.toString()"></PreviewCatalog>
        </CatalogDrawer>
      </div>
    </div>
    <div class="absolute left-0 top-32 z-50">
      <n-button @click="handleToComment"
                round
                class="transition-all transition-500 -translate-x-1/2"
                style="padding-right: 10px; padding-left: 35px"
                secondary>
        <TextIcon icon="bxs:comment-edit" tip="前往评论"></TextIcon>
      </n-button>
    </div>
    <div class="flex">
      <div v-show="catalogShow" class="px-1 hidden md:block sticky transition-all duration-500 ease-in-out top-20 h-0"
           :class="[catalogShow?'':'-translate-x-[3000px]']">
        <PreviewCatalog :id="post.id.toString()"></PreviewCatalog>
      </div>
      <div class="flex-1 w-0">
        <PreviewMarkdown :id="post.id.toString()" :content="post.content"></PreviewMarkdown>
      </div>
    </div>
    <div id="commentView">
      <n-card>
        <CommentView :id="post.id.toString()"></CommentView>
      </n-card>
    </div>
  </div>
</template>

<script setup lang="ts">

import {nextTick, onBeforeMount, onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import api from "@/api";
import PreviewMarkdown from "@/components/common/markdown/PreviewMarkdown.vue";
import ArrayTag from "@/components/pc/tag/ArrayTag.vue";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import DateIcon from "@/components/pc/icon/DateIcon.vue";
import PreviewCatalog from "@/components/common/markdown/PreviewCatalog.vue";
import CommentView from "@/components/pc/view/CommentView.vue";
import CatalogShowButton from "@/components/pc/button/CatalogShowButton.vue";
import CatalogDrawer from "@/components/pc/drawer/CatalogDrawer.vue";
import {useTitle} from "@vueuse/core";


const id = ref('')
const post = ref<IPost>()
const route = useRoute()
const catalogShow = ref(false)
const catalogDrawerShow = ref(false)
const title = useTitle()
onMounted(() => {
  id.value = route.params.id as string
  getPost()
})

const handleToComment = () => {
  (document.querySelector('#commentView') as HTMLElement).scrollIntoView();
}
const getPost = () => {
  window.$loadingBar.start()
  api.post.view({
    id: id.value,
  }).then(res => {
    if (res.data.code === 0) {
      post.value = res.data.data as IPost
      title.value = post.value.title
      post.value.tags = res.data.data.tags ? JSON.parse(res.data.data.tags) : []
    }
  }).finally(() => {
    window.$loadingBar.finish()
  })
}


onBeforeMount(() => {

  document.title = 'Bi8Bo'
  nextTick(() => {
    title.value = 'Bi8Bo'
  })
})


</script>

<style scoped>

</style>